<template>
  <view class="reward-detail-page">
    <!-- 顶部导航 -->
    <!-- <view class="nav-header">
      <view class="nav-back" @click="goBack">
        <uni-icons type="left" size="20" color="#333"></uni-icons>
      </view>
      <text class="nav-title">直接奖励详情</text>
      <view class="nav-placeholder"></view>
    </view> -->
    <CustomNavBar title="奖励详情"  />
    <!-- 按月份分组的奖励记录 -->
    <view v-for="group in groupedRewards" :key="group.month" class="month-group">
      <!-- 月份标题 -->
      <view class="month-title">
        <text class="month-text">{{ group.month }}</text>
      </view>

      <!-- 该月份的奖励记录列表 -->
      <view class="reward-list">
        <view 
          v-for="record in group.records" 
          :key="record.id"
          class="reward-item"
        >
          <view class="reward-info">
            <view class="reward-main">
              <text class="reward-user">{{ record.phone }}</text>
              <text class="reward-time">支付时间：{{ DateUtils.formatDate(record.time, 'YYYY-MM-DD HH:mm:ss') }}</text>
            </view>
            <text class="reward-amount">¥{{ record.amount }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="groupedRewards.length === 0" class="empty-state">
      <text class="empty-text">暂无奖励记录</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import PileApi from '@/api/pile/pile.js'
import { onLoad, onShow } from '@dcloudio/uni-app'
import DateUtils from '@/utils/dateUtils.js'
import CustomNavBar from '@/components/CustomNavBar.vue'

// 页面参数
const type = ref('')

// 奖励记录数据
const rewardRecords = ref([])

// 按月份分组的奖励记录
const groupedRewards = computed(() => {
  const groups = {}
  rewardRecords.value.forEach(record => {
    if (record.time) {
      const date = new Date(record.time)
      const monthKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`
      const monthLabel = `${date.getMonth() + 1}月`
      
      if (!groups[monthKey]) {
        groups[monthKey] = {
          month: monthLabel,
          records: []
        }
      }
      groups[monthKey].records.push(record)
    }
  })
  
  // 按月份倒序排列
  return Object.keys(groups)
    .sort((a, b) => b.localeCompare(a))
    .map(key => groups[key])
})

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 加载奖励数据
const loadRewardData = async () => {
  try {
    const data = await PileApi.getIncomeInviter(type.value)
    rewardRecords.value = data || []
  } catch (error) {
    console.error('加载奖励数据失败:', error)
    uni.showToast({
      title: '加载数据失败',
      icon: 'none'
    })
  }
}

// 接收页面参数
onLoad((options) => {
  type.value = options.type || ''
})

// 页面加载时执行
onMounted(() => {
  if (type.value) {
    loadRewardData()
  }
})
</script>

<style scoped>
.reward-detail-page {
  min-height: 100vh;
  background-color: white;
}

/* 顶部导航 */
.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}

.nav-back {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.nav-placeholder {
  width: 60rpx;
}

/* 月份分组 */
.month-group {
  margin-bottom: 20rpx;
}

.month-group:last-child {
  margin-bottom: 0;
}

/* 月份标题 */
.month-title {
  padding: 10rpx 30rpx 10rpx 55rpx;
  background-color: #f5f5f5;
  margin-bottom: 20rpx;
}

.month-text {
  font-size: 30rpx;
  font-weight: 400;
  color: black;
}

/* 奖励记录列表 */
.reward-list {
  background-color: #fff;
  margin: 0 30rpx;
  border-radius: 20rpx;
  overflow: hidden;
}

.reward-item {
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.reward-item:last-child {
  border-bottom: none;
}

.reward-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reward-main {
  flex: 1;
}

.reward-user {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
}

.reward-time {
  font-size: 24rpx;
  color: #666;
}

.reward-amount {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  padding-bottom:50rpx;
}

/* 空状态 */
.empty-state {
  padding: 100rpx 30rpx;
  text-align: center;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>